{% load static %}
<reply id="reply-{{ reply.id }}" class="block pt-2 mt-2 border-t">
    <div class="flex items-end justify-between">
        <div class="flex">
            {% if reply.author %}
            <a href="{% url 'userprofile' reply.author.username %}">
                <img class="w-8 h-8 object-cover rounded-full mr-2" src="{{ reply.author.profile.avatar }}">
            </a>
            {% else %}
            <img class="w-8 h-8 object-cover rounded-full" src="{% static 'images/avatar_default.svg' %}">
            {% endif %}
            <div class="w-fit">
                {% if reply.author %}
                <a class="block" href="">
                    <span class="font-bold hover:underline">{{ reply.author.profile.name }}</span>
                    <span class="text-sm text-gray-400">@{{ reply.author.username }}</span>
                </a>
                {% else %}
                <span class="text-gray-500">no author</span>
                {% endif %}
                <div class="mr-3">{{ reply.body }}</div>
            </div>
        </div>
        <div class="flex items-center gap-4 [&>a:hover]:underline">
            {% include 'snippets/likes_reply.html' %}
            {% if user.is_authenticated and reply.author == user %}
            <a class="cursor-pointer"
                hx-get="{% url 'reply-delete' reply.id %}"
                hx-target="#reply-{{ reply.id }}" 
                hx-swap="outerHTML">
                Delete
            </a>
            {% endif %}
        </div>
    </div>
    <div class="ml-10">
        {% if reply.level < 5 %}
	    <a class="font-bold hover:underline text-xs cursor-pointer"
            hx-get="{% url 'reply-form' reply.id %}"
            hx-target="this"
            hx-swap="outerHTML" >
	        Reply
	    </a>
        {% endif %}
        <div class="mt-2">
            {% for reply in reply.replies.all %}
            {% include 'a_posts/reply.html' %}
            {% endfor %} 
        </div>
	</div>
</reply> 


{% if reply.parent_reply.id %}
<div class="hidden">
<a id="replylink-{{ reply.parent_reply.id }}"
    class="font-bold hover:underline text-xs cursor-pointer"
    hx-get="{% url 'reply-form' reply.parent_reply.id %}"
    hx-target="this"
    hx-swap="outerHTML" 
    hx-swap-oob="true">
    Reply
</a>
</div>
{% endif %}
